<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Ladybird - 座位</title>
        <jsp:include page="top-link.jsp"></jsp:include>
        <link rel="stylesheet" type="text/css"
              href="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/css/head.css"/>
        <link rel="stylesheet" type="text/css"
              href="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/css/seats.css"/>
    </head>
    <body>
        <%--        头部导航栏--%>
        <%@include file="top-nav.jsp" %>
        <div class="seats">
            <div class="seats-title">
                <h2>${jsonData.data[0]}</h2>
                <input id="cityAndVenue" type="hidden" value="${jsonData.data[0]}">
                <input id="detailsId" type="hidden" value="${jsonData.data[1]}">
            </div>
            <div class="select">
                <span>筛选票品：</span>
                <c:forEach items="${jsonData.data[2]}" var="price">
                    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i
                            class="layui-icon layui-icon-rmb"></i>
                            ${price}
                    </button>
                </c:forEach>
            </div>
            <div class="bug">
                <div class="bug-left">
                    <div class="shows">
                        <h1>演唱台</h1>
                    </div>
                    <div class="seats-details">
                        <input id="seat" type="hidden"/>
                    </div>
                </div>
                <div class="tickets">
                    <h2>已选商品</h2>
                    <input type="hidden" id="car"/>
                    <p id="all">总计：￥ 0 / 共 0 张</p>
                    <p>
                        <button type="button" onclick="sendTicket()"
                                class="layui-btn layui-btn-radius layui-btn-danger">确认订单
                        </button>
                    </p>
                </div>
            </div>
        </div>
        <!-- 尾部导航 -->
        <%@include file="foot-nav.jsp" %>
    </body>
    <script src="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/js/jquery-2.2.3.min.js"></script>
    <script src="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/layui/layui.js"></script>
    <script type="text/javascript">
        layui.use(['element','layer'], function () {
        })
        // 发送异步请求，当页面加载的时候，发送ajax请求到后台
        $().ready(function () {
            $.getJSON("${pageContext.request.contextPath}/api/v1/pub/user/seats-info", {detailsId: "${jsonData.data[1]}"}, function (data) {
                //此处返回的data已经是json对象
                console.log(data)
                var seatsData = data.data;
                // 先根据横坐标排序，在根据纵坐标排序 其实查询的就是正确的顺序
                console.log(seatsData)
                var seats = '';
                for (let i = 0; i < seatsData.length; i++) {
                    // 获取背景图
                    let status = ''
                    let datum = seatsData[i];
                    // 座位的状态，0已售，1未售不可选，2未售可选，3未售
                    // 2 未售可选
                    if (datum.ticketState == 2) {
                        status = "https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/img/seat-200.png"
                        // 1未售不可选
                    } else if (datum.ticketState == 1) {
                        status = "https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/img/seated-selectd.png"
                    } else if (datum.ticketState == 0) {
                        // 0已售
                        status = "https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/img/selected.png"
                    }
                    // 为 0 不可用
                    if (datum.ticketEnable == 0) {
                        status = "https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/img/not-seatd.png"
                    }
                    // 获取座位
                    let ticketX = datum.ticketX;
                    let ticketY = datum.ticketY;
                    let title = ticketX + "排，" + ticketY + "座"
                    // 获取id
                    let seatId = "seat" + seatsData[i].ticketSeatId;
                    // 获取价格
                    let ticketPrice = datum.ticketPrice
                    // 拼接函数 此处。只有座位可用才拼接函数 其他情况不需要
                    let checkFun = "";
                    if (datum.ticketState == 2 && datum.ticketEnable == 1) {
                        checkFun = "checkSeat(" + seatId + ", " + ticketX + ", " + ticketY + ", " + ticketPrice + ")"
                    }
                    // alert(checkFun)
                    seats += "<div class='ss'>" +
                        "<img id='" + seatId + "'  onclick='" + checkFun + "' title='" + title + "' class='seats' src='" + status + "'></div>"
                }
                $("#seat").after(seats);
            });
        });

        // 票的个数
        var
            number = 0;
        // 票的价格
        var allPrice = 0;
        // 用来存放票的信息
        // 格式：横坐标-纵坐标-价格 如：1-2-999
        var seatData = [];

        /**
         * 选座和不选的函数
         * @param ticketId 当前图片的对象
         * @param ticketX 横坐标
         * @param ticketY 纵坐标
         * @param ticketPrice 票的价格
         */
        function checkSeat(ticketId, ticketX, ticketY, ticketPrice) {
            // 1 判断票的个数
            // 1.1 小于6 可以选座
            if (number < 6) {
                // 2 判断是不是有
                // 找出所有的 class 值为 id的标签
                let selected = $("." + ticketId.id);
                // 判断长度
                //如果长度为0 就直接添加
                if (selected.length == 0) {
                    // 总个数+1
                    number++
                    // 2.2.1 设置颜色
                    $("#" + ticketId.id).attr('src', "https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/img/seat-900.png")
                    // 2.2.2 添加
                    let select = "<p class='selectedSect " + ticketId.id + "'>" + ticketId.title + " 价格 " + ticketPrice + "</p>"
                    $("#car").after(select)
                    // 2.2.3 重新计算价格
                    allPrice += ticketPrice
                    // <p id="all">总计：￥ 3120 / 共4张</p>
                    let totalMsg = "<p id='all'>总计：￥ " + allPrice + " / 共 " + number + " 张</p>"
                    // 替换元素
                    $("#all").replaceWith(totalMsg)
                    // 把数据添加到数组中去
                    let id = ticketId.id.substr(4, ticketId.id.length);
                    let item = id + "-" + ticketX + "-" + ticketY + "-" + ticketPrice
                    seatData.push(item)
                } else {
                    // 不为0 说明已经有了 此时是移除操作
                    // 总个数1
                    number--
                    // 2.1.1 有就移除
                    $(selected).remove()
                    // 2.2.1 设置颜色
                    $("#" + ticketId.id).attr('src', "https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/img/seat-200.png")
                    // 2.1.2 重新计算价格
                    allPrice -= ticketPrice
                    // <p id="all">总计：￥ 3120 / 共4张</p>
                    let totalMsg = "<p id='all'>总计：￥ " + allPrice + " / 共 " + number + " 张</p>"
                    // 替换元素
                    $("#all").replaceWith(totalMsg)
                    // 删除元素
                    let id = ticketId.id.substr(4, ticketId.id.length);
                    let item = id + "-" + ticketX + "-" + ticketY + "-" + ticketPrice
                    let indexOf = seatData.indexOf(item);
                    seatData.splice(indexOf, 1)
                }
            } else {
                // 1.2 如果大于等于6 不能选座
                // 找出所有的 class 值为 id的标签
                let selected = $("." + ticketId.id);
                // 判断长度
                if (selected.length == 0) {
                    layui.use(['layer'], function () {
                        layer.open({
                            title: '系统提示',
                            content: "你现在了已经选了 " + number + " 张票，不能再选座了嗷"
                        });
                    })
                } else {
                    // 不为0 说明已经有了 此时是移除操作
                    // 总个数1
                    number--
                    // 2.1.1 有就移除
                    $(selected).remove()
                    $("#" + ticketId.id).attr('src', "https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/img/seat-200.png")
                    // 2.1.2 重新计算价格
                    allPrice -= ticketPrice
                    // <p id="all">总计：￥ 3120 / 共4张</p>
                    let totalMsg = "<p id='all'>总计：￥ " + allPrice + " / 共 " + number + " 张</p>"
                    // 替换元素
                    $("#all").replaceWith(totalMsg)
                    // 删除元素
                    let id = ticketId.id.substr(4, ticketId.id.length);
                    let item = id + "-" + ticketX + "-" + ticketY + "-" + ticketPrice
                    let indexOf = seatData.indexOf(item);
                    seatData.splice(indexOf, 1)
                }
            }
        }

        function sendTicket() {
            if (seatData.length == 0) {
                layui.use(['layer'], function () {
                    layer.open({
                        title: '系统提示',
                        content: "你现在了已经选了 0 张票，不能下单嗷"
                    });
                })
            } else {
                $.ajax({
                    url: "${pageContext.request.contextPath}/api/v1/pri/user/json/confirm-order",
                    traditional: true,
                    type: "post",
                    data: {
                        "list": seatData,
                        "detailsId": $("#detailsId").val(),
                        "cityAndVenue": $("#cityAndVenue").val()
                    },
                    success: function (result) {
                        console.info(result);
                        if (result.code == -1) {
                            layui.use(['layer'], function () {
                                layer.open({
                                    title: '系统提示',
                                    content: result.msg
                                });
                            })
                        } else if (result.code == 0) {
                            // 订单在此处生成 拿到处理的信息
                            // 然后把订单id发送数到 Controller 然后跳转到下一个页面接收数据转发
                            window.location = "${pageContext.request.contextPath}/api/v1/pri/user/to-buy-page?orderInfoId=" + result.data[0].orderInfoId
                        } else if (result.code == 1) {
                            layui.use(['layer'], function () {
                                layer.open({
                                    title: '系统提示',
                                    content: "数据正在处理中，请稍后"
                                });
                            })
                        } else {
                            layui.use(['layer'], function () {
                                // 跳转到登录界面
                                window.location = "${pageContext.request.contextPath}/api/v1/pri/user/login-by-account"
                                // layer.open({
                                //     title: '系统提示',
                                //     content: "网络异常，请重试"
                                // });
                            })
                        }
                    }
                })
            }
        }
    </script>
</html>
